<template>
  <header class="head">
    <h2>器械销售人员管理系统</h2>
    
<span style="width:280px;" class="span">
    <aplayer :music="videoUpload.music"></aplayer>
</span>

    <div class="infos" v-if="userinfo">
      
      <p class="wel" @click="mine"> {{userinfo.username}}</p>
      <Upload :userinfo="userinfo"/>
      <p>
        <el-tag effect="dark" :type="userinfo.roleid | colortype">{{userinfo.roleid | rolename}}</el-tag>
      </p>
      <p>
        <el-button @click="logout" type="danger" icon="el-icon-switch-button" circle></el-button>
      </p>
    </div>
  </header>
</template>



<script>
import {mapState,mapMutations} from "vuex"
import Upload from "./upload.vue"

import aplayer from 'vue-aplayer'
export default {
  data() {
    return {
      videoUpload: {
                theme: '#ffc0cb',
                autoplay: true,
                repeat: 'repeat-all', // 轮播模式。值可以是 'repeat-one'（单曲循环）'repeat-all'（列表循环）或者 'no-repeat'（不循环）。为了好记，还可以使用对应的 'music' 'list' 'none'
                mini: true, // 迷你模式
                float: true, // 浮动模式。你可以在页面上随意拖放你的播放器
                music: { // 当前播放的音乐
                    title: '能够成家吗',
                    author: '咖啡少年',
                    url: 'https://assets.smallsunnyfox.com/music/1.mp3',                  
                    pic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2366432289,1795558543&fm=26&gp=0.jpg' // 封面图片
                }
           }

    };
  },
  components:{
    Upload,
    aplayer
  },
  props: ["userinfo"],
  methods: {
    logout() {
      this.$confirm("你确定要退出登录么？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(res=>{
        sessionStorage.removeItem("token")
        sessionStorage.removeItem("roleid");
        this.$router.push({name:"login"})
      })
    },
    mine(){
      this.$router.push({name:"usermine"})
    }
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .wel{
    color: #e8f80e;
  }
  h2 {
    // color: #fff;
    font-size: 24px;
  }
  .infos {
    display: flex;
    align-items: center;
    p {
      margin: 0 6px;
      cursor: pointer;
    }
  }
  .aplayer{
    background: rgba(236, 236, 235, 0.1);
  }
  .aplayer-pic{
    background: rgba(236, 236, 235, 0.1);
  }
}
</style>
